document.addEventListener('DOMContentLoaded', () => {
    // 获取密码输入框和吉祥物图片的DOM元素
    const passwordInputs = document.querySelectorAll('input[type="password"]');
    const characterImg = document.getElementById('character-img');

    // 为所有密码输入框添加事件监听
    passwordInputs.forEach(input => {
        input.addEventListener('focus', () => {
            characterImg.src = 'character_cover_eyes.png'; // 捂眼图片
            characterImg.style.transform = 'scale(1.1)'; // 放大吉祥物
        });

        input.addEventListener('blur', () => {
            characterImg.src = 'character_normal.png'; // 正常图片
            characterImg.style.transform = 'scale(1)'; // 恢复原大小
        });
    });

    // 登录按钮事件绑定
    const loginButton = document.getElementById('login-btn');
    if (loginButton) {
        loginButton.addEventListener('click', function() {
            console.log('登录按钮被点击');
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 基本验证
            if (!username || !password) {
                alert('请填写所有必填项');
                return;
            }

            // 发送POST请求到后端
            fetch('http://localhost:8080/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ username, password })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Network response was not ok, status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    if (data.error === 'User not found') {
                        alert('没有这个用户');
                    } else if (data.error === 'Invalid password') {
                        alert('密码错误');
                    } else {
                        alert('登录失败：' + data.error);
                    }
                } else {
                    console.log('登录成功');
                    alert(data.message);
                    window.location.href = 'work.html'; // 登录成功后跳转到主页
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('登录过程中发生错误，请稍后再试');
            });
        });
    } else {
        console.error('Login button not found');
    }

    // 注册按钮事件绑定
    document.getElementById('register-btn').addEventListener('click', function() {
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        // 基本验证
        if (!username || !email || !password) {
            alert('请填写所有必填项');
            return;
        }

        // 发送POST请求到后端
        fetch('http://localhost:8080/register', { // 更新为8080端口
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ username, email, password })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`Network response was not ok, status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.error) {
                alert(data.error);
            } else {
                alert(data.message);
                window.location.href = 'login.html'; // 注册成功后跳转到登录页面
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('注册过程中发生错误，请稍后再试');
        });
    });


});